<template>
  <div class="price">
    <!-- <p style="margin-left:10px;">淘宝垫付单,天猫垫付单,平台返款服务费统一都是3元/单。</p>
      <p style="margin-left:10px;">如有其他买手属性的要求(性别、信誉等) , 以发布任务时页面显示的增值价格为准。
        ( 增值价格是指在下图价格表的基础上所增加的价格)
        淘宝、天猫任务价格表单位:元(佣金不包括平台返款费用)</p> -->
    <div style="display: flex;margin:10px 0 20px;">
      <div style="display: flex;margin-left:10px;">
        <!--          <img style="width:20px;height:20px;" src="../../../assets/taobao.png" alt="">-->
        <!--          <img style="width:20px;height:20px;margin-left:10px;" src="../../../assets/tianmao.png" alt="">-->
      </div>
      <span style="margin-left:10px;">拼多多任务价格表 单位：元
           <b style="color:#FE4F3F;">（晒图加2元）</b>
      </span>
    </div>
    <!-- <img style="width:30%;margin-bottom:10px;margin-top:20px;margin-left:10px;" src="../../assets/cope.png" alt=""> -->
    <el-table :data="tableData" style="width: 40%" border :row-class-name="tableRowClassName" header-align="center">
      <el-table-column prop="name" label="价格阶梯" align="center"></el-table-column>
      <el-table-column prop="price" label="浏览单+精刷" align="center"></el-table-column>
      <el-table-column align="center" label="晒图">
        <template slot-scope="scope">
             <span style="color:red;">{{scope.row.price}}+2</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {usergetpriceinfo} from '../../api/api'
  export default {
    name: "Admin_price",
    data() {
      return {
        tableData: [],
      }
    },
    created() {
      this.getprice()
    },
    methods: {
      getprice() {
        usergetpriceinfo().then(res => {
          if (res.Status == 200) {
            let temp = res.Data.info
            let titlelist = ['0 - 50', '50 - 100', '100 - 150', '150 - 200', '200 - 250', '250 - 300', '300 - 350', '350 - 400', '400 - 450']
            this.tableData = temp.map((item, idx) => {
              return {name: titlelist[idx], price: item}
            })
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 1) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      }
    }
  }
</script>

<style lang="scss">
  .price {
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  }
</style>

